<template name="headerNav">
  <ul class="tabs">
    <li
      v-for="(item,i) in headerNavList"
      :key="i"
      :class="{'is_this' : i == count , 'afRight':true}"
      @click="onTabs(i)"
    >{{item}}</li>
  </ul>
</template>

<script>
export default {
  name: "headerNav",
  data() {
    return {
      headerNavList: [],
      count: 0
    };
  },
  methods: {
    getData() {
      let getHeaderNavList = [
        "自由行",
        "跟团游",
        "当地游",
        "签证",
        "全球WiFi",
        "邮轮"
      ];

      this.headerNavList = getHeaderNavList;
    },
    onTabs(i) {
      this.count = i;
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style lang="stylus" scoped>
.tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  cursor: pointer;
  padding-top: 10px;
  font-size 14px
  color #555

  .is_this {
    color: orange;
    position: relative;

    &:before {
      content: '';
      width: 100%;
      height: 3px;
      background-color: orange;
      position: absolute;
      bottom: -12px;
    }
  }

  .afRight {
    position: relative;
    margin: 0 15px;

     &:hover{
        color orange
    }

    &:after {
      content: '';
      width: 1px;
      height: 16px;
      background-color: #eee;
      position: absolute;
      right: -15px;
      top: 3px;
    }

    &:last-child {
      &:after {
        content: '';
        width: 0;
        height: 0;
      }
    }
  }
}
</style>